<template>
    <div class="main_container">
        <Modal v-model="active" title="角色信息" @on-ok="handleSubmit">
            <Form v-model="changeData" :label-width="120" :label-colon="true">
                <FormItem label="角色名">
                    <Input v-model="changeData.name" />
                </FormItem>
                <FormItem label="简介">
                    <Input v-model="changeData.remark" type="textarea" :rows="4" />
                </FormItem>
                <FormItem label="对应标题">
                    <Input v-model="changeData.title" />
                </FormItem>
                <FormItem label="图标">
                    <Input v-model="changeData.iconUrl" /> <br>
                    <Icon :type="changeData.iconUrl" size="60" /> <br>
                    仅支持vue-ui-plus的Icon组件
                    <a href="https://www.iviewui.com/view-ui-plus/component/base/icon">想要了解更多请点击查看</a>
                </FormItem>

                <FormItem label="权限管理" v-if="!isCreate">
                    <Tag v-for="perm in changeData.permList " closable size="large" @on-close="handlePermDelete(perm)">{{
                        permMap[perm] }}</Tag>
                    <Button icon="ios-add" type="dashed" size="small" @click="handlePermOpen">添加</Button>
                </FormItem>

                <Modal title="添加权限" v-model="permAddData.active" @on-ok="handlePermSubmit">
                    <Select v-model="permAddData.value">
                        <Option v-for="id in availablePerms" :value="id">{{ permMap[id] }}</Option>
                    </Select>
                </Modal>
            </Form>
        </Modal>
        <Row>
            <Col span="4" offset="18" class-name="button_container">
            <Button type="success" shape="circle" size="large" style="width: 200px;" @click="handleCreate">新建身份</Button>
            </Col>
        </Row>
        <Divider></Divider>
        <List>
            <ListItem v-for="role in roleData">
                <ListItemMeta :title="role.name" :description="role.remark" />
                <Space>
                    <Icon :type="role.iconUrl"></Icon>
                    对应标题: {{ role.title }}
                    <div class="tag_container">
                        <Tag v-for="perm in role.permList">{{ permMap[perm] }}</Tag>
                    </div>
                </Space>
                <template #action>
                    <Space>
                        <Button type="primary" style="width: 100px;" shape="circle" @click="handleUpdate(role)">修改</Button>
                        <Button type="error" style="width: 100px;" shape="circle" @click="handleDelete(role.id)">
                            删除</Button>
                    </Space>
                </template>
            </ListItem>
        </List>
    </div>
</template>
<script>
import { Avatar, Divider, FormItem, List, ListItem } from 'view-ui-plus';

export default {
    name:"Role",
    data() {
        return {
            roleData: {},
            changeData: {},
            active: false,
            isCreate: false,
            permMap: {},
            permAddData: {
                active: false,
                value: "",
            },
            availablePerms: [],//保存可用的权限名
        };
    },
    methods: {
        handleCreate() {
            this.active = true;
            this.isCreate = true;
            this.changeData = {};
            this.renewAvailablePerm();
        },
        handleUpdate(role) {
            this.active = true;
            this.isCreate = false;
            this.changeData = role;
            this.renewAvailablePerm();
        },
        handleDelete(id) {
            this.confirm(() => {
                this.$api.post("admin/role/delete/" + id).then((res) => {
                    this.info(res.msg);
                    this.renew();
                })
            })
        },
        handleSubmit() {
            this.confirm(() => {
                var url = this.isCreate ? "admin/role/create" : "admin/role/update"
                this.$api.post(url, this.changeData).then((res) => {
                    this.info(res.msg);
                    this.renew();
                });
            })
        },
        handlePermOpen() {
            this.permAddData.active = true;
            this.permAddData.value = "";

        },
        handlePermSubmit() {
            var data = {
                role_id: this.changeData.id,
                perm_id: this.permAddData.value
            };
            this.$api.post("admin/perm/grant", data).then((res) => {
                this.info(res.msg);
                this.changeData.permList.push(this.permAddData.value);
                this.availablePerms = this.availablePerms.filter(
                    (perm) => { return perm != data.perm_id })
            })
        },
        handlePermDelete(perm_id) {
            // this.info("删除" + perm_id);
            var data = {
                role_id: this.changeData.id,
                perm_id: perm_id,
            };
            console.log(data);
            console.log(data);
            this.$api.post("admin/perm/revoke", data).then((res) => {
                this.info(res.msg);
                if (res.code == 0) {//修改成功
                    this.changeData.permList = this.changeData.permList.
                        filter((role) => { return data.perm_id != role });//删除角色名
                    this.availablePerms.push(perm_id);
                }
                else this.renew();//出现未知情况更新
            })

        },
        renewAvailablePerm() {
            if (this.changeData.permList == null) return [];
            this.availablePerms = Object.keys(this.permMap);
            // console.log("更新可利用角色数据");
            this.availablePerms = this.availablePerms.filter((value) => {
                for (var i of this.changeData.permList)
                    if (i == value) return false;
                return true;
            });
        },
        confirm(func) {
            this.$Modal.confirm({
                title: "确认框",
                onOk: func,
            });
        },
        info(message) {
            this.$Notice.info({
                title: "提示",
                desc: message,
            });
        },
        renew() {
            this.$api.get("admin/role/list").then((res) => {
                this.roleData = res.data.data;
                for (var role of this.roleData) {
                    if (role.perms == null) role.permList = [];
                    else role.permList = role.perms.split(',');
                    // console.log(role);
                }
                console.log(this.roleData);
            });
        },
    },
    created() {
        this.$api.get("admin/perm/map").then((res) => {
            this.permMap = res.data.data;
            console.log(this.permMap);
            this.renew();
        })
    },
    components: { List, ListItem, Divider, Avatar, FormItem }
}
</script>
<style scoped>
.main_container {
    width: 90%;
    height: 98%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.tag_container {
    width: 200px;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: auto;
}
</style>